<template>
  <div class="app-container">
    <secondary @reset="reset" @determine="determine" />
    <div class="filter-container">
      <span class="filter-title filter-item">任务状态</span>
      <k-select
        v-model="listQuery.activityStatus"
        class="filter-item user-status"
        type="1"
        :select-params="[{label:'未开始',value: 1},{label:'进行中',value: 2},{label:'已结束',value: 3}]"
        @handleSelectEvent="handleFilter"
      />
      <span class="filter-title filter-item">任务时间</span>
      <k-date-picker v-model="timeValue" class="filter-item" @hqchang="handleFilter" />
      <k-input
        v-model.trim="listQuery.key"
        class="filter-item"
        is-search
        placeholder="请输入关键词"
        :search-fun="handleFilter"
        @keyup.enter.native="handleFilter"
      />
    </div>
    <!-- 创建活动 -->
    <k-button v-if="authorityHandle(176)" class="top-btn" value="添加活动" @click.native="creatActivityDialog" />
    <div v-else style="height: 40px;" />
    <div class="top-right-btn">
      <k-button class="top-btn" value="设置活动时间" @click.native="creatTime" />
    </div>
    <!--表格相关 -->
    <el-table
      :data="bloodTableData"
      fit
      border
      highlight-current-row
      style="width: 100%;border-radius:8px;"
      :header-cell-style="{background:'#F6F5FA',color:'#4E4F62'}"
    >
      <el-table-column width="80px" type="index" label="序号" align="center" />
      <el-table-column prop="activityIdentification" min-width="100px" label="活动标识" align="center" show-overflow-tooltip />
      <el-table-column
        prop="activityIntroduce"
        min-width="80px"
        label="活动主题"
        align="center"
        show-overflow-tooltip
      />
      <el-table-column min-width="150px" label="活动时间" align="center" show-overflow-tooltip>
        <template slot-scope="scope">
          {{ scope.row.startTime }} - {{ scope.row.endTime }}
        </template>
      </el-table-column>
      <el-table-column prop="timeStatusName" min-width="80px" label="活动状态" align="center" show-overflow-tooltip />
      <el-table-column min-width="80px" label="开关" align="center">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.activityStatus"
            active-color="#3b425d"
            inactive-color="#E9EBF2"
            active-text="开"
            inactive-text="关"
            :active-value="1"
            :inactive-value="2"
            :disabled="!authorityHandle(176)"
            @change="updateActStatus($event,scope)"
          />
        </template>
      </el-table-column>
      <el-table-column min-width="200px" label="操作" align="center">
        <template slot-scope="scope">
          <div class="op-div">
            <k-button class="table-btn" value="查看/修改" @click.native="updateActivityDialog(scope.row)" />
            <k-button
              v-if="authorityHandle(176)"
              class="table-btn"
              value="删除"
              :disabled="scope.row.activityStatus===1?true:false"
              @click.native="deleteActivityItem(scope.row.id)"
            />
            <!-- <k-button class="table-btn" value="板块排序" @click.native="activitySortDialog(scope.row)" /> -->
          </div>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="totalRows > 0"
      :total="totalRows"
      :page.sync="listQuery.pager.pageNo"
      :limit.sync="listQuery.pager.pageSize"
      @pagination="loadData"
    />

    <!-- 创建活动 弹窗 -->
    <k-dialog
      :show-hide.sync="creatActivity.showHide"
      :modal-append-to-body="false"
      :append-to-body="true"
      :title="textMap[dialogStatus]"
      class-name="creatActivity_dialog"
      :show-foot="false"
      :two-btn="authorityHandle(176) && updateButtonState"
      :close-fun="handleCloseDialog"
      @click="saveActivity"
    >
      <el-radio-group
        v-model="activityType"
        fill="#3b425d"
        text-color="#ffffff"
        class="top-radio-group"
        @change="radioChange"
      >
        <el-radio-button label="activitySetting">活动设置</el-radio-button>
        <el-radio-button label="rollSetting">Roll房设置</el-radio-button>
        <el-radio-button label="redpocketSetting">红包设置</el-radio-button>
        <el-radio-button label="avatarSetting">头像框设置</el-radio-button>
        <el-radio-button label="discountSetting">折扣设置</el-radio-button>
        <el-radio-button label="synthesisSetting">合成设置</el-radio-button>
      </el-radio-group>
      <div class="dialog-giveBabySetting">
        <div v-if="activityType === 'activitySetting'" style="padding:50px;margin-bottom:100px">
          <el-form :model="activityInfo" label-width="auto">
            <el-form-item label="活动标识：">
              <el-input
                v-model="activityInfo.activityIdentification"
                :readonly="!authorityHandle(176)"
                show-word-limit
                placeholder="活动唯一标识，不能重复可以和banner跳转链接一致"
              />
            </el-form-item>
            <el-form-item label="活动主题：">
              <el-input
                v-model="activityInfo.activityTheme"
                :readonly="!authorityHandle(176)"
                show-word-limit
                placeholder="请输入活动主题"
              />
            </el-form-item>
            <el-form-item label="活动说明：">
              <el-input
                v-model="activityInfo.activityIntroduce"
                :readonly="!authorityHandle(176)"
                type="textarea"
                :rows="3"
                show-word-limit
                placeholder="请输入活动简介"
              />
            </el-form-item>
            <el-form-item label="活动时间：">
              <el-date-picker
                v-model="timeCotinue"
                :disabled="!authorityHandle(176)"
                type="datetimerange"
                value-format="yyyy-MM-dd HH:mm:ss"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="datetimerange"
              />
            </el-form-item>
          </el-form>
        </div>
        <div v-if="activityType === 'rollSetting'" style="padding:50px;margin-bottom:100px">
          <el-form :model="activityInfo" label-width="auto">
            <el-form-item label="标题：">
              <el-input
                v-model="activityInfo.rollTheme"
                :readonly="!authorityHandle(176)"
                show-word-limit
                placeholder="请输入标题"
              />
            </el-form-item>
            <el-form-item label="活动说明：">
              <el-input
                v-model="activityInfo.rollIntroduce"
                :readonly="!authorityHandle(176)"
                type="textarea"
                :rows="3"
                show-word-limit
                placeholder="请输入活动说明"
              />
            </el-form-item>

            <el-form-item label="添加roll房：">
              <el-select
                v-model="activityInfo.rollIds"
                multiple
                style="width: 100%;"
                filterable
                placeholder="请选择"
                :disabled="!authorityHandle(176)"
                @change="selectRollRoomChange"
              >
                <el-option
                  v-for="item in rollRoomResultList"
                  :key="item.lineId"
                  :label="item.lineName"
                  :value="item.lineId"
                />
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <div v-if="activityType === 'redpocketSetting'" style="padding:50px;margin-bottom:100px">
          <el-form :model="activityInfo" label-width="auto">
            <el-form-item label="标题：">
              <el-input
                v-model="activityInfo.envelopeTheme"
                :readonly="!authorityHandle(176)"
                show-word-limit
                placeholder="请输入标题"
              />
            </el-form-item>
            <el-form-item label="活动说明：">
              <el-input
                v-model="activityInfo.envelopeIntroduce"
                :readonly="!authorityHandle(176)"
                type="textarea"
                :rows="3"
                show-word-limit
                placeholder="请输入活动说明"
              />
            </el-form-item>

            <el-form-item label="添加活动红包：">
              <el-select
                v-model="activityInfo.envelopeIds"
                multiple
                style="width: 100%;"
                filterable
                placeholder="请选择"
                :disabled="!authorityHandle(176)"
                @change="selectRedChange"
              >
                <el-option
                  v-for="item in redResultList"
                  :key="item.lineId"
                  :label="item.lineName"
                  :value="item.lineId"
                />
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <div v-if="activityType === 'avatarSetting'" style="padding:50px;margin-bottom:100px">
          <el-form :model="activityInfo" label-width="auto">
            <el-form-item label="标题：">
              <el-input
                v-model="activityInfo.iconTheme"
                :readonly="!authorityHandle(176)"
                show-word-limit
                placeholder="请输入标题"
              />
            </el-form-item>
            <el-form-item label="活动说明：">
              <el-input
                v-model="activityInfo.iconIntroduce"
                :readonly="!authorityHandle(176)"
                type="textarea"
                :rows="3"
                show-word-limit
                placeholder="请输入活动说明"
              />
            </el-form-item>

            <el-form-item label="头像框名称：">
              <el-select
                v-model="activityInfo.iconIds"
                multiple
                style="width: 100%;"
                filterable
                placeholder="请选择"
                :disabled="!authorityHandle(176)"
                @change="selectIconsChange"
              >
                <el-option
                  v-for="item in iconsResultList"
                  :key="item.lineId"
                  :label="item.lineName"
                  :value="item.lineId"
                />
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <div v-if="activityType === 'discountSetting'" style="padding:50px;">
          <el-form :model="activityInfo" label-width="auto">
            <el-form-item label="标题：">
              <el-input
                v-model="activityInfo.boxTheme"
                :readonly="!authorityHandle(176)"
                show-word-limit
                placeholder="请输入标题"
              />
            </el-form-item>
            <el-form-item label="活动说明：">
              <el-input
                v-model="activityInfo.boxIntroduce"
                :readonly="!authorityHandle(176)"
                type="textarea"
                :rows="3"
                show-word-limit
                placeholder="请输入活动说明"
              />
            </el-form-item>
            <el-form-item label="箱子折扣：">
              <div style="display:flex">
                <el-input
                  v-model="activityInfo.boxRebat"
                  onkeyup="value=value.replace(/[^0-9.]/g,'')"
                  :readonly="!authorityHandle(176)"
                  placeholder="请输入"
                /> %
              </div>
            </el-form-item>
            <el-form-item label="折扣时间：" style="width:300px">
              <el-date-picker
                v-model="discountTimeCotinue"
                :disabled="!authorityHandle(176)"
                type="datetimerange"
                value-format="yyyy-MM-dd HH:mm:ss"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="discountDatetimerange"
              />
            </el-form-item>
            <el-form-item label="前端展示时间：">
              <div class="chargeform">
                <el-select
                  v-model="activityInfo.rebatTimeType"
                  :disabled="!authorityHandle(176)"
                  placeholder="请选择"
                  class="red_money"
                >
                  <el-option label="折扣时间" :value="1" />
                  <el-option label="活动时间" :value="2" />
                </el-select>
              </div>
            </el-form-item>
            <el-form-item label="箱子名称：">
              <el-select
                v-model="activityInfo.boxIds"
                multiple
                style="width: 100%;"
                filterable
                placeholder="请选择"
                :disabled="!authorityHandle(176)"
                @change="selectBoxChange"
              >
                <el-option
                  v-for="item in boxsResultList"
                  :key="item.lineId"
                  :label="item.lineName"
                  :value="item.lineId"
                />
              </el-select>
            </el-form-item>
          </el-form>
        </div>

        <!-- 合成相关 -->
        <div v-if="activityType === 'synthesisSetting'" class="synthesis-box" style="padding:50px;">
          <el-form :model="activityInfo" label-width="auto">
            <el-form-item label="合成标题：">
              <el-input
                v-model="activityInfo.mergeTheme"
                :readonly="!authorityHandle(176)"
                show-word-limit
                placeholder="请输入标题"
              />
            </el-form-item>
            <el-form-item label="合成说明：">
              <el-input
                v-model="activityInfo.mergeIntro"
                :readonly="!authorityHandle(176)"
                type="textarea"
                show-word-limit
                placeholder="请输入合成说明"
              />
            </el-form-item>
            <el-form-item label="合成时间：" style="width:300px">
              <el-date-picker
                v-model="synthesisTimeCotinue"
                :disabled="!authorityHandle(176)"
                type="datetimerange"
                value-format="yyyy-MM-dd HH:mm:ss"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="setSynthesisTimeCotinue"
              />
            </el-form-item>

            <el-form-item label="合成材料：">
              <!-- <search-select /> -->
              <el-select
                v-model="goodsValueModel"
                multiple
                style="width: 100%;"
                filterable
                placeholder="请选择"
              >
                <el-option
                  v-for="item in resultList"
                  :key="item.lineId"
                  :label="item.lineName"
                  :value="item.lineId"
                  @click.native="selectChange(item)"
                />
              </el-select>
              <div style="margin-top:10px;">
                <el-tag
                  v-for="(item ,index) of checkedGoodsList"
                  :key="item.goodsId"
                  :closable="authorityHandle([32,34,35,36],true)"
                  @close="handleBabyTagDelete(index)"
                  @click="tagclick(item)"
                >
                  <span style="color:red">{{ item.size }}(件)</span> {{ item.goodsName }}
                </el-tag>
              </div>
            </el-form-item>

            <div class="flex">
              <el-form-item class="target" label="合成目标：">
                <el-select
                  v-model="activityInfo.mergeTargetId"
                  style="width: 100%;"
                  placeholder="请选择"
                  :disabled="!authorityHandle(176)"
                >
                  <el-option
                    v-for="item in boxsResultList"
                    :key="item.lineId"
                    :label="item.lineName"
                    :value="item.lineId"
                  />
                </el-select>
              </el-form-item>
            </div>

            <el-form-item label="开启时间：" style="width:300px">
              <el-date-picker
                v-model="openTimeCotinue"
                :disabled="!authorityHandle(176)"
                type="datetimerange"
                value-format="yyyy-MM-dd HH:mm:ss"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @change="setOpenTimeCotinue"
              />
            </el-form-item>

          </el-form>
        </div>

        <div v-if="!updateButtonState" class="twoBtn">
          <button v-if="preStepShow" class="submitBtn1 btnStyle" @click="preStep">上一步</button>
          <button class="submitBtn1 btnStyle" @click="nextStep">{{ nextButtonText }}</button>
        </div>
      </div>
    </k-dialog>
    <k-dialog
      :show-hide.sync="actDialogShowHide"
      :modal-append-to-body="false"
      :append-to-body="true"
      title="板块排序"
      :show-foot="false"
      :two-btn="false"
    >
      <div ref="dragSelect" class="actdiv">
        <el-tag v-for="item in activityTagList" :key="item.sort" type="success">
          {{ item.name }}
        </el-tag>
      </div>
    </k-dialog>

    <!-- 修改饰品数量 弹窗 -->
    <k-dialog
      :show-hide.sync="updateBabyNum.showHide"
      :modal-append-to-body="false"
      :append-to-body="true"
      class="addZone-dialog"
      title="修改当前饰品数量"
      :show-foot="false"
      :two-btn="true"
      :close-fun="handleNumCloseDialog"
      @click="saveBabyNum"
    >
      <el-form label-width="200px" class="form-modify">
        <el-form-item label="添加数量：">
          <el-input v-model.number="babyNum" placeholder="请输入数值" />
        </el-form-item>
      </el-form>
    </k-dialog>
    <!-- 设置 活动时间 新用户的设计 -->
    <k-dialog
      :show-hide.sync="TimeShow"
      :modal-append-to-body="false"
      :append-to-body="true"
      class="addBox-dialog"
      title="设置时间"
      :show-foot="false"
      :two-btn="authorityHandle(161)"
      @click="saveTimeShow"
    >
      <el-form label-width="auto">
        <el-form-item label="活动时间：">
          <el-tooltip content="在这个时间内注册的 才是活动的新人" placement="top">
            <i class="el-icon-question" />
          </el-tooltip>
          <el-date-picker
            v-model="timeRangeBig"
            style="width:auto"
            :clearable="false"
            type="datetimerange"
            value-format="yyyy-MM-dd HH:mm:ss"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="timeRangeFun"
          /></el-form-item>
      </el-form>

    </k-dialog>
  </div>
</template>
<script>
import {
  saveActivityData,
  updateActivityData,
  listActivityData,
  deleteActivityData,
  updateActivityStatus,
  getNormalIconFrame,
  getNormalRoll,
  getNormalEnvelope,
  getNormalBox
} from '@/api/activity'
import { activityGetActivityTime, activitySetActivityTime } from '@/api/hq'
import { getGoodsPlatformList } from '@/api/rules/listdata'
import Pagination from '@/components/Pagination'
import Sortable from 'sortablejs'

export default {
  components: {
    Pagination
  },
  data() {
    return {
      currentId: -1,
      rollRoomResultList: [],
      redResultList: [],
      iconsResultList: [],
      boxsResultList: [],
      rollRoomCheckedList: [],
      redCheckedResultList: [],
      iconsCheckedResultList: [],
      boxsCheckedResultList: [],
      preStepShow: true,
      activityType: 'activitySetting',
      radioActive: 0,
      nextButtonText: '下一步',
      activityTypeArray: ['activitySetting', 'rollSetting', 'redpocketSetting', 'avatarSetting',
        'discountSetting', 'synthesisSetting'
      ],
      dialogStatus: 'create',
      updateButtonState: false,
      textMap: {
        update: '修改活动',
        create: '创建活动'
      },
      totalRows: 0, // 分页组件--数据总条数
      listQuery: {
        pager: {
          pageNo: 1,
          pageSize: 10,
          totalRows: '',
          start: ''
        },
        sort: '', // 排序字段 为对应列名,
        direction: '', // 排序 正向(asc)逆向(desc),
        startTime: undefined, // 饰品外观',
        endTime: undefined, // 饰品类别',
        activityStatus: undefined, // 饰品类别',
        key: '' // 箱子名称或关键词 箱子配置界面所用'
      },
      activityTagList: [],
      bloodTableData: [],
      winnerUserList: [],
      userPlayList: [],
      checkedIdList: [],
      ruleGuideContent: {
        content: ''
      },
      resultList: [], // 全部合成材料
      checkedGoodsList: [], // 下方选中
      goodsValueModel: [], // 合成材料双向绑定
      babyNum: 1,
      updateBabyNum: {
        showHide: false
      },
      activityInfo: {
        id: undefined,
        activityIdentification: '', // 活动标识",
        activityTheme: '', // 活动主题",
        activityIntroduce: '', // 活动说明",
        startTime: undefined,
        endTime: undefined,
        rollTheme: undefined, // roll房说明",
        activityStatus: undefined, // 状态 1开|2关",
        rollIntroduce: undefined, // roll房介绍",
        rollIds: [], // rollid的josn数组",
        envelopeTheme: undefined, // 红包标题",
        envelopeIntroduce: undefined, // 红包说明",
        envelopeIds: [], // 红包idosn数组",
        iconTheme: undefined, // 头像框标题",
        iconIntroduce: undefined, // 头像框说明",
        iconIds: [], // 头像框idosn数组",
        boxTheme: undefined, // 箱子标题",
        boxIntroduce: undefined, // 箱子说明",
        boxRebat: undefined, // 箱子折扣",
        rebatStartTime: undefined, // 折扣开始时间",
        rebatEndTime: undefined, // 折扣结束时间",
        boxIds: [], // 箱子ids数组 当全部时，值为[-1]",
        rebatTimeType: undefined, // 前端展示时间类型 1折扣时间|2活动时间",
        itemSort: undefined, // 排序json串 1roll|红包|3|头像|4折扣",
        timeStatusName: undefined,
        /* 合成*/
        mergeTheme: undefined, // 合成标题
        mergeIntro: undefined, // 合成说明
        mergeStartTime: undefined, // 合成开始时间
        mergeEndTime: undefined, // 合成结束时间
        mergeMaterialJson: [], // 合成材料
        mergeTargetId: undefined, // 合成目标boxid
        mergeTargetStartTime: undefined, // 目标开启始时间
        mergeTargetEndTime: undefined // 目标开启终时间
      },

      synthesisTimeCotinue: [], // 合成时间
      openTimeCotinue: [], // 开启时间

      timeValue: '',
      timeCotinue: [],
      discountTimeCotinue: [],
      conditions: {
        keyword: null
      },
      creatActivity: {
        showHide: false
      },
      actDialogShowHide: false,
      ruleGuide: {
        showHide: false
      },
      TimeShow: false,
      timeRange: {
        startTime: '',
        endTime: ''
      },
      timeRangeBig: []
    }
  },
  watch: {
    // 时间赋值
    timeValue(val) {
      this.listQuery.startTime = this.timeValue ? this.timeValue[0] : null
      this.listQuery.endTime = this.timeValue ? this.timeValue[1] : null
    }
  },
  created() {
    this.loadData()
    this.getGoodsPlatformList()
    this.getData()
  },
  methods: {
    /** 合成**/
    // 合成时间区间选择
    setSynthesisTimeCotinue(timeValue) {
      this.activityInfo.mergeStartTime = this.synthesisTimeCotinue ? timeValue[0] : null
      this.activityInfo.mergeEndTime = this.synthesisTimeCotinue ? timeValue[1] : null
    },

    // 合成开启时间选择
    setOpenTimeCotinue(timeValue) {
      this.activityInfo.mergeTargetStartTime = this.openTimeCotinue ? timeValue[0] : null
      this.activityInfo.mergeTargetEndTime = this.openTimeCotinue ? timeValue[1] : null
    },

    /** *********/
    // 请求饰品
    getGoodsPlatformList() {
      getGoodsPlatformList({ 'key': '', 'alreadyIds': '[-1]' }).then(res => {
        this.resultList = []
        Object.assign(this.resultList, res.data)
      })
    },

    // 合成材料 房里边的饰品选择事件
    selectChange(item) {
      const itemIndex = this.checkedGoodsList.findIndex((v) => {
        return v.goodsId === item.lineId
      })
      if (itemIndex === -1) {
        this.checkedGoodsList.push({ 'goodsName': item.lineName, 'goodsId': item.lineId, size: 1 })
      } else {
        this.checkedGoodsList.splice(itemIndex, 1)
      }
      this.activityInfo.mergeMaterialJson = this.checkedGoodsList
    },

    handleBabyTagDelete(index) {
      this.checkedGoodsList.splice(index, 1)
      this.goodsValueModel.splice(index, 1)
    },

    tagclick(item) {
      this.currentBabyId = item.goodsId
      this.babyNum = item.size
      this.updateBabyNum.showHide = true
    },

    // 关闭修改弹窗
    handleNumCloseDialog() {
      this.updateBabyNum.showHide = false
    },

    saveBabyNum() {
      const _this = this
      this.checkedGoodsList.map(function(item) {
        if (item.goodsId === _this.currentBabyId) {
          item.size = _this.babyNum
        }
      })
      this.handleNumCloseDialog()
    },
    /** ************/

    selectRollRoomChange(value) {
      this.rollRoomCheckedList = value
    },
    selectRedChange(value) {
      this.redCheckedResultList = value
    },
    selectIconsChange(value) {
      this.iconsCheckedResultList = value
    },
    selectBoxChange(value) {
      value.findIndex(item => item == -1) == 0 ? this.activityInfo.boxIds = [-1] : this.activityInfo.boxIds =
				value.filter(item => item != -1)
    },

    setSort() {
      const el = this.$refs.dragSelect
      const _this = this
      // 设置配置
      const ops = {
        animation: 1000,
        // 拖动结束
        onEnd: function(evt) {
          const oldItem = _this.activityTagList[evt.oldIndex]
          _this.activityTagList.splice(evt.oldIndex, 1)
          _this.activityTagList.splice(evt.newIndex, 0, oldItem)
          const tagList = _this.activityTagList.map((item, index) => {
            return item.sort
          })
          _this.$log(tagList)
          updateActivityData({
            id: _this.currentId,
            itemSort: JSON.stringify(tagList)
          }).then(res => {
            if (res.data.success) {
              _this.$message.success('操作成功')
              // this.$resetForm(this.activityInfo)
              // this.loadData()
            } else {
              _this.$message.success(res.data.msg)
            }
          })
        }
      }
      // 初始化
      Sortable.create(el, ops)
    },
    // 板块排序
    activitySortDialog(row) {
      this.activityTagList = []
      this.actDialogShowHide = true
      this.currentId = row.id
      this.$nextTick(() => {
        if (this.authorityHandle(176)) {
          this.setSort()
        }
      })
      // [{ sort: 1, name: 'rooll 房' }, { sort: 2, name: '红包' },
      // { sort: 3, name: '头像框' }, { sort: 4, name: '折扣' }],
      this.$log(this.activityTagList, row.itemSort)
      JSON.parse(row.itemSort).map((item, index) => {
        switch (item) {
          case 1:
            this.activityTagList.push({
              sort: index + 1,
              name: 'rooll 房'
            })
            break
          case 2:
            this.activityTagList.push({
              sort: index + 1,
              name: '红包'
            })
            break
          case 3:
            this.activityTagList.push({
              sort: index + 1,
              name: '头像框'
            })
            break
          case 4:
            this.activityTagList.push({
              sort: index + 1,
              name: '折扣'
            })
            break
        }
      })
    },

    getData() {
      getNormalRoll().then(res => {
        res.data ? this.rollRoomResultList = res.data : this.rollRoomResultList = []
      })

      getNormalEnvelope().then(res => {
        res.data ? this.redResultList = res.data : this.redResultList = []
      })

      getNormalIconFrame().then(res => {
        res.data ? this.iconsResultList = res.data : this.iconsResultList = []
      })

      getNormalBox().then(res => {
        if (res.data) {
          this.boxsResultList = res.data
          this.boxsResultList.unshift({
            lineId: -1,
            lineName: '全选',
            lineCheck: false
          })
        } else {
          this.boxsResultList = [{
            lineId: -1,
            lineName: '全选',
            lineCheck: false
          }]
        }
      })
    },

    radioChange(v) {
      this.radioActive = this.activityTypeArray.indexOf(v)
      this.preStepShow = this.radioActive !== 0
      this.nextButtonText = this.radioActive === this.activityTypeArray.length - 1 ? '保存' : '下一步'
      switch (this.radioActive) {
        case 1:
          getNormalRoll().then(res => {
            res.data ? this.rollRoomResultList = res.data : this.rollRoomResultList = []
          })
          break
        case 2:
          getNormalEnvelope().then(res => {
            res.data ? this.redResultList = res.data : this.redResultList = []
          })
          break
        case 3:
          getNormalIconFrame().then(res => {
            res.data ? this.iconsResultList = res.data : this.iconsResultList = []
          })
          break
        case 4:
          getNormalBox().then(res => {
            if (res.data) {
              this.boxsResultList = res.data
              this.boxsResultList.unshift({
                lineId: -1,
                lineName: '全选',
                lineCheck: false
              })
            } else {
              this.boxsResultList = [{
                lineId: -1,
                lineName: '全选',
                lineCheck: false
              }]
            }
          })
          break
        case 5:
          getNormalBox().then(res => {
            if (res.data) {
              this.boxsResultList = res.data
              this.boxsResultList.unshift({
                lineId: -1,
                lineName: '全选',
                lineCheck: false
              })
            } else {
              this.boxsResultList = [{
                lineId: -1,
                lineName: '全选',
                lineCheck: false
              }]
            }
          })
          break
      }
    },
    // 上一步
    preStep() {
      if (this.radioActive === 0) {
        this.radioActive = 0
        return
      }
      this.activityType = this.activityTypeArray[--this.radioActive]
      this.preStepShow = this.radioActive !== 0
      if (this.radioActive !== this.activityTypeArray.length - 1) {
        this.nextButtonText = '下一步'
      }
    },
    // 下一步
    nextStep() {
      if (this.radioActive === this.activityTypeArray.length - 1) {
        this.preStepShow = true
        this.radioActive = this.activityTypeArray.length - 1
        this.$log('触发保存')
        if (this.dialogStatus === 'create') {
          if (this.activityInfo.activityTheme && this.activityInfo.activityIntroduce && this.timeCotinue
            .length > 0) {
            this.activityInfo.rollIds = JSON.stringify(this.activityInfo.rollIds)
            this.activityInfo.iconIds = JSON.stringify(this.activityInfo.iconIds)
            this.activityInfo.envelopeIds = JSON.stringify(this.activityInfo.envelopeIds)
            this.activityInfo.boxIds = JSON.stringify(this.activityInfo.boxIds)
            if (this.activityInfo.mergeMaterialJson) {
              const arr = this.activityInfo.mergeMaterialJson.concat()
              let list = []
              list = arr.map(item => {
                return {
                  goods_cn_name: item.goodsName,
                  id: item.goodsId,
                  num: item.size
                }
              })
              this.activityInfo.mergeMaterialJson = JSON.stringify(list)
            }

            this.activityInfo.readyStatus = false
            this.$log('保存', this.activityInfo)
            saveActivityData(this.activityInfo).then(res => {
              if (res.data.success) {
                this.$message.success('保存成功')
                this.creatActivity.showHide = false
                this.$resetForm(this.activityInfo)
                this.loadData()
              } else {
                const data = {
                  show: true,
                  type: 3,
                  name: '',
                  data: {
                    upperStatus: false,
                    lowStatus: false,
                    boxNames: res.data.data
                  },
                  info: this.activityInfo
                }
                this.$store.commit('secondary/SET_SECONDARYDATA', data)
                this.activityInfo.boxIds = JSON.parse(this.activityInfo.boxIds)
                this.activityInfo.rollIds = JSON.parse(this.activityInfo.rollIds)
                this.activityInfo.iconIds = JSON.parse(this.activityInfo.iconIds)
                this.activityInfo.envelopeIds = JSON.parse(this.activityInfo.envelopeIds)
                if (this.activityInfo.mergeMaterialJson) {
                  const arr2 = JSON.parse(this.activityInfo.mergeMaterialJson.concat())
                  let list2 = []
                  list2 = arr2.map(item => {
                    return {
                      goodsName: item.goods_cn_name,
                      goodsId: item.id,
                      size: item.num
                    }
                  })
                  this.activityInfo.mergeMaterialJson = list2
                }
              }
            })
          } else {
            this.$message('活动设置必填')
          }
        }
        return
      }
      // 校验
      if (this.activityType == 'activitySetting') {
        if (this.activityInfo.activityTheme && this.activityInfo.activityIntroduce && this.timeCotinue.length >
					0) {
          this.preStepShow = true
          this.activityType = this.activityTypeArray[++this.radioActive]
        } else {
          this.$message('活动设置必填')
        }
      } else {
        this.activityType = this.activityTypeArray[++this.radioActive]
        if (this.radioActive === this.activityTypeArray.length - 1) {
          this.nextButtonText = '保存'
        }
      }
    },

    determine() {
      this.creatActivity.showHide = false
      this.$resetForm(this.activityInfo)
      this.loadData()
    },

    loadData() {
      listActivityData(this.listQuery).then(res => {
        this.totalRows = res.data.totalRows
        this.bloodTableData = res.data.rows
      })
    },
    // 肉房持续时间区间选择
    datetimerange(timeValue) {
      this.activityInfo.startTime = this.timeCotinue ? timeValue[0] : null
      this.activityInfo.endTime = this.timeCotinue ? timeValue[1] : null
    },
    // 肉房持续时间区间选择
    timeRangeFun(val) {
      console.log('val: ', val)
      this.startTime = val ? val[0] : null
      this.endTime = val ? val[1] : null
    },
    // 折扣持续时间区间选择
    discountDatetimerange(timeValue) {
      this.activityInfo.rebatStartTime = this.discountTimeCotinue ? timeValue[0] : null
      this.activityInfo.rebatEndTime = this.discountTimeCotinue ? timeValue[1] : null
    },
    // 添加活动时间
    creatTime() {
      activityGetActivityTime().then((res) => {
        if (res.status == 200) {
          this.TimeShow = true
          this.timeRangeBig = [res.data.activityStartTime, res.data.activityEndTime]
        } else this.$message.error(res.data.message)
      })
    },
    // 设置时间
    saveTimeShow() {
      if (!this.timeRangeBig) return this.$message.error('时间不能为空')
      activitySetActivityTime({
        activityStartTime: this.timeRangeBig[0],
        activityEndTime: this.timeRangeBig[1]
      }).then((res) => {
        if (res.status == 200) {
          this.TimeShow = false
          this.$message(res.data.message)
        }
        this.$message.error(res.data.message)
      })
    },

    // 添加活动
    creatActivityDialog() {
      this.$resetForm(this.activityInfo)
      this.timeCotinue = []
      this.discountTimeCotinue = []
      this.synthesisTimeCotinue = []
      this.openTimeCotinue = []
      this.checkedGoodsList = []
      this.dialogStatus = 'create'
      this.creatActivity.showHide = true
      this.updateButtonState = false
      // 新建窗口重置
      this.preStepShow = false
      this.radioActive = 0
      this.activityType = this.activityTypeArray[0]
      this.nextButtonText = '下一步'
    },

    updateActivityDialog(row) {
      this.dialogStatus = 'update'
      this.updateButtonState = true
      this.creatActivity.showHide = true
      Object.assign(this.activityInfo, row)
      this.activityInfo.rollIds = JSON.parse(this.activityInfo.rollIds)
      this.activityInfo.iconIds = JSON.parse(this.activityInfo.iconIds)
      this.activityInfo.envelopeIds = JSON.parse(this.activityInfo.envelopeIds)
      this.activityInfo.boxIds = JSON.parse(this.activityInfo.boxIds)
      this.$log(this.activityInfo)
      this.timeCotinue = [row.startTime === null ? '' : row.startTime, row.endTime === null ? '' : row.endTime]
      this.discountTimeCotinue = [row.rebatStartTime === null ? '' : row.rebatStartTime, row.rebatEndTime ===
				null
        ? '' : row.rebatEndTime
      ]

      this.timeCotinue = [row.startTime === null ? '' : row.startTime, row.endTime === null ? '' : row.endTime]
      this.synthesisTimeCotinue = [row.mergeStartTime === null ? '' : row.mergeStartTime, row.mergeEndTime === null ? '' : row.mergeEndTime]
      this.openTimeCotinue = [row.mergeTargetStartTime === null ? '' : row.mergeTargetStartTime, row.mergeTargetEndTime === null ? '' : row.mergeTargetEndTime]

      if (row.mergeMaterialJson) {
        const arr = JSON.parse(row.mergeMaterialJson.concat())
        let list = []
        list = arr.map(item => {
          return {
            goodsName: item.goods_cn_name,
            goodsId: item.id,
            size: item.num
          }
        })
        this.goodsValueModel = list.map(item => item.goodsId)
        this.checkedGoodsList = list
        this.activityInfo.mergeMaterialJson = list
      }
    },
    // 保存活动
    saveActivity() {
      if (this.dialogStatus === 'update') {
        this.activityInfo.rollIds = JSON.stringify(this.activityInfo.rollIds)
        this.activityInfo.iconIds = JSON.stringify(this.activityInfo.iconIds)
        this.activityInfo.envelopeIds = JSON.stringify(this.activityInfo.envelopeIds)
        this.activityInfo.boxIds = JSON.stringify(this.activityInfo.boxIds)

        if (this.activityInfo.mergeMaterialJson) {
          if (typeof (this.activityInfo.mergeMaterialJson) == 'string') {
            this.activityInfo.mergeMaterialJson = JSON.parse(this.activityInfo.mergeMaterialJson)
          }
          const arr = this.activityInfo.mergeMaterialJson.concat()
          let list = []
          list = arr.map(item => {
            return {
              goods_cn_name: item.goodsName,
              id: item.goodsId,
              num: item.size
            }
          })

          this.activityInfo.mergeMaterialJson = JSON.stringify(list)
        }

        this.activityInfo.readyStatus = false
        updateActivityData(this.activityInfo).then(res => {
          if (res.data.success) {
            this.activityInfo.rollIds = JSON.parse(this.activityInfo.rollIds)
            this.activityInfo.iconIds = JSON.parse(this.activityInfo.iconIds)
            this.activityInfo.envelopeIds = JSON.parse(this.activityInfo.envelopeIds)
            this.activityInfo.boxIds = JSON.parse(this.activityInfo.boxIds)
            if (this.activityInfo.mergeMaterialJson) {
              const arr2 = JSON.parse(this.activityInfo.mergeMaterialJson.concat())
              let list2 = []
              list2 = arr2.map(item => {
                return {
                  goodsName: item.goods_cn_name,
                  goodsId: item.id,
                  size: item.num
                }
              })
              this.activityInfo.mergeMaterialJson = list2
            }
            this.$message.success('修改成功')
            // this.$resetForm(this.activityInfo)
            this.loadData()
          } else {
            const data = {
              show: true,
              type: 2,
              name: '',
              data: {
                upperStatus: false,
                lowStatus: false,
                boxNames: res.data.data
              },
              info: this.activityInfo
            }
            this.$store.commit('secondary/SET_SECONDARYDATA', data)
            // this.$message.error(res.data.msg)
            this.activityInfo.rollIds = JSON.parse(this.activityInfo.rollIds)
            this.activityInfo.iconIds = JSON.parse(this.activityInfo.iconIds)
            this.activityInfo.envelopeIds = JSON.parse(this.activityInfo.envelopeIds)
            this.activityInfo.boxIds = JSON.parse(this.activityInfo.boxIds)
            if (this.activityInfo.mergeMaterialJson) {
              const arr2 = JSON.parse(this.activityInfo.mergeMaterialJson.concat())
              let list2 = []
              list2 = arr2.map(item => {
                return {
                  goodsName: item.goods_cn_name,
                  goodsId: item.id,
                  size: item.num
                }
              })
              this.activityInfo.mergeMaterialJson = list2
            }
          }
        })
      }
      // this.handleCloseDialog()
    },

    // 重新获取
    reset() {
      this.loadData()
    },

    handleCloseDialog() {
      this.creatActivity.showHide = false
      this.$nextTick(() => {

      })
    },
    deleteActivityItem(id) {
      this.$confirm('确定删除么?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteActivityData({
          id
        }).then(res => {
          if (res.data.success) {
            this.$message.success('删除成功')
            this.loadData()
          } else {
            this.$message.success(res.data.msg)
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },

    // roll 房状态
    updateActStatus(event, scope) {
      updateActivityStatus(
        scope.row.id
      ).then(res => {
        if (res.data.success) {
          this.$message.success(res.data.msg)
          this.loadData()
        } else {
          this.$message.error(res.data.msg)
          scope.row.activityStatus = 2
        }
      })
    },
    // 搜索查询事件
    handleFilter() {
      this.listQuery.pager.pageNo = 1
      this.loadData()
    }
  }
}
</script>
<style lang="scss" scoped>
$menuText: #14162E; // 侧边栏字体颜色
$hoverColor: #1D143C; // 鼠标停留主色调浅色
$mainColor: #3b425d; // 主色调

.synthesis-box {
	::v-deep .el-select .el-select__tags>span {
		display: none;
	}

	.el-tag+.el-tag {
		margin-left: 10px;
	}

	.el-tag {
		color: $mainColor;
		background-color: #ffffff;
		border-color: $mainColor;

		::v-deep .el-tag__close {
			color: $mainColor;
		}

		::v-deep .el-icon-close:hover {
			color: #ffffff;
			background: $mainColor;
		}
	}

	.flex {
		display: flex;

		.el-form-item {
			.el-select {
				width: 120px;
				margin-right: 10px;
			}
		}
	}
}

.filter-container {
	width: 100%;
	height: 48px;
	line-height: 48px;

	.filter-item {
		display: inline-block;
		vertical-align: middle;
		margin-bottom: 10px;
	}

	.kInput {
		position: absolute;
		right: 20px;
	}

	.filter-title {
		height: 48px;
		line-height: 48px;
		font-size: 16px;
		font-weight: 500;
		margin-right: 22px;
		color: #14162E;
	}

	.user-item {
		margin-left: 10px;
		margin-right: 20px;
	}

	.room-type,
	.user-status,
	.account-status {
		margin-right: 20px;
	}
}
.top-right-btn{
  position: absolute;
  right: 20px;
  top: 70px;
}
.red_money {
	width: 200px;
}

.grid-div {
	display: grid;
	grid-template-columns: repeat(7, 120px);

	.item {
		height: 50px;
		font-size: 14px;
		line-height: 50px;
		text-align: center;
		border: 1px solid #E3E2E7;
		width: 120px;
		overflow: hidden;
		display: inline-block;
		text-overflow: ellipsis;
		white-space: nowrap;
		padding: 0 10px;
	}
}

.top-btn {
	margin: 30px 0px 30px 0px;
	font-size: 14px;
	color: #ffffff;

	&:nth-of-type(2) {
		margin-left: 10px;
	}
}

.kSelect .el-select .el-input .el-input__inner {
	width: 124px;
}

::v-deep .el-select .el-input.is-focus .el-input__inner {
	border-color: $mainColor;
}

::v-deep .el-input__inner:focus {
	border-color: $mainColor;
}

.el-form-item__label-wrap .el-form-item__label {
	float: none;
}

.dialog_creatActivity {
	display: flex;
	flex-direction: row;
	justify-content: center;
	margin: 40px 80px;

	::v-deep .el-select .el-select__tags>span {
		display: none;
	}

	::v-deep .el-range-editor.el-input__inner {
		width: 400px;
	}

	.el-tag+.el-tag {
		margin-left: 10px;
	}

	.el-tag {
		color: $mainColor;
		background-color: #ffffff;
		border-color: $mainColor;

		::v-deep .el-tag__close {
			color: $mainColor;
		}

		::v-deep .el-icon-close:hover {
			color: #ffffff;
			background: $mainColor;
		}
	}
}

.form-modify {
	display: flex;
	flex-direction: row;
	justify-content: center;
	margin: 10px 80px;
}

.editer {
	width: 500px;
	border-radius: 8px;
	float: left;
	box-sizing: border-box;
	color: #606266;

	::v-deep .ql-container {
		height: 270px;
		border-radius: 0px 0px 8px 8px;
	}

	::v-deep .ql-toolbar.ql-snow {
		border-radius: 8px 8px 0px 0px;
	}
}

.chargeform {
	display: flex;
	flex-direction: row;
}

::v-deep .el-switch__label.is-active {
	color: $mainColor;
}

.addBox_dialog {
	display: flex;
	flex-direction: column;
	justify-content: center;

	::v-deep .el-dialog__body {
		width: 678px;
		margin: 40px 80px;
	}

	::v-deep .el-select .el-select__tags>span {
		display: none;
	}

	.el-tag+.el-tag {
		margin-left: 10px;
	}

	.el-tag {
		color: $mainColor;
		background-color: #ffffff;
		border-color: $mainColor;

		::v-deep .el-tag__close {
			color: $mainColor;
		}

		::v-deep .el-icon-close:hover {
			color: #ffffff;
			background: $mainColor;
		}
	}
}

.cell-baby {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;

}

.ellipsis-span {
	width: 80px;
	overflow: hidden;
	display: inline-block;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.giveBaby-dialog {
	::v-deep .el-dialog__body {
		width: 678px;
		height: 500px;
	}

	.dialog-giveBabySetting {
		::v-deep.el-input {
			width: 200px;
		}

		.price-input {
			width: 120px;
		}
	}
}

.actdiv {
	padding: 50px;
}

.actdiv>* {
	margin-right: 20px
}
</style>
